<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
		<title>Password Generator</title>
	<head>
	<body>
		
		<div class="container">
			<h2>Password Generator</h2>
			<div class="result-container">
				<span id="result"></span>
				<button class="btn" id="copy">
					<i class="far fa-clipboard"></i>
				</button>
			</div>
			
			<div class="settings">
				<div class="setting">
					<label>Password Length</label>
					<input type="number" id="length" min="4" max="20" value="20">
				</div>
				<div class="setting">
					<label for="">Include uppercase letters</label>
					<input type="checkbox" id="uppercase" checked>
				</div>
				<div class="setting">
				  <label>Include lowercase letters</label>
				  <input type="checkbox" id="lowercase" checked>
				</div>
				<div class="setting">
				  <label>Include numbers</label>
				  <input type="checkbox" id="numbers" checked>
				</div>
				<div class="setting">
				  <label>Include symbols</label>
				  <input type="checkbox" id="symbols" checked>
				</div>
			</div>
			
			<button class="btn btn-large" id="generate">Generate Password</button>
		</div>

		<script src="js/script.js"></script>
	</body>
</html>